歌詞頁面細節調整

2025 iThome 鐵人賽

DAY 19

佛心分享-IT 人自學之術

打造專屬於歌手的音樂資訊網頁：從零開始的前端實作與技術分享系列第 28 篇

17th鐵人賽

sheep

2025-10-13 21:27:27

53 瀏覽

分享至

今天在歌詞頁面，我進行了一個小細節的調整：原本歌詞頁面上方的 YouTube 連結是用YouTube圖片來呈現，但我想讓它更統一、簡潔，也方便調整大小和效果，所以決定改成使用 Font Awesome 的音樂符號 icon。

修改的思路

保留連結功能

不論是圖片還是 icon，點擊後都要能打開原本的 YouTube 連結，因此 <a> 標籤保持不變，只改內部的呈現方式。

從圖片改成 icon

原本的 HTML 片段:

<a id="youtubeBtn" class="youtube-btn" target="_blank">
    <img src="images/youtube-logo.png" alt="YouTube" width="40">
</a>

修改後:

<a id="youtubeBtn" class="youtube-btn" target="_blank">
    <i class="fas fa-music"></i>
</a>

引入 Font Awesome
為了使用 icon，我在 <head> 加入了 Font Awesome 的 CSS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

CSS 調整
原本針對 <img> 的樣式改成針對<i>：

/* YouTube 按鈕(音樂符號)置中顯示 */
.youtube-btn {
    display: block;
    text-align: center;
    margin: 10px auto;
}


/* Icon 樣式 */
.youtube-btn i {
    font-size: 40px; /* 原本圖片寬度是 40px，這裡用字體大小代替 */
    color: #3ac3de;
    transition: transform 0.3s ease, color 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}


/* 滑鼠移上去的效果 */
.youtube-btn i:hover {
    transform: scale(1.15);
    color: #208ba6; /* hover 時顏色加深 */
}

這樣一來，按鈕不僅維持原本置中、陰影和放大效果，還更容易改變顏色或大小，比起圖片更靈活。